<template>
  <div class="app-container">
    <header>
      <weatherIndex/>
    </header>
    <el-container>
      <el-aside width="50%">
        <indexLeftTabs/>
      </el-aside>
      <el-main>
        <el-row>
          <el-col :span="24">
            <div ref="chartOrderRef" class="echarts-order"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div ref="chart7DaysRef" class="echarts-7day"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div ref="chartBuildRef" class="echarts-build"/>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <ranking />
    <el-backtop :right="30" :bottom="100" />
  </div>
</template>

<script setup name="Index">
import indexLeftTabs from '@/components/IndexLeftTabs'
import ranking from '@/components/Ranking'
import WeatherIndex from '@/components/WeatherIndex'
import {onMounted, ref} from "vue";
import * as echarts from "echarts";
import {orderStatistics} from "@/api/wxz/echarts.js";
import {Rank} from "@element-plus/icons-vue";

const chartOrderRef = ref(null)
const chart7DaysRef = ref(null)
const chartBuildRef = ref(null)

const colorPalette = [
  '#d87c7c',
  '#919e8b',
  '#d7ab82',
  '#6e7074',
  '#61a0a8',
  '#efa18d',
  '#787464',
  '#cc7e63',
  '#724e58',
  '#4b565b'
];
echarts.registerTheme('vintage', {
  color: colorPalette,
  backgroundColor: '#fef8ef',
  graph: {
    color: colorPalette
  }
});
onMounted(async () => {
  const orderEcharts = echarts.init(chartOrderRef.value, 'vintage')
  const _7DaysEcharts = echarts.init(chart7DaysRef.value, 'vintage')
  const buildEcharts = echarts.init(chartBuildRef.value, 'vintage')

  const orderOption = {
    title: [
      {
        text: '本学期订单' +
            '' +
            '',
        left: '24%',
        top: '9%',
        textAlign: 'center'
      },
      {
        text: '历史订单',
        left: '73%',
        top: '9%',
        textAlign: 'center'
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} 单 ({d}%)'
    },
    legend: {
      show: false
    },
    series: [
      {
        name: '本学期订单',
        type: 'pie',
        radius: '45%',
        center: ['25%', '60%'], // 左边这个饼图
        data: [],
        label: {
          formatter: '{b}-{d}%',
          position: 'outside'
        }
      },
      {
        name: '历史订单',
        type: 'pie',
        radius: '45%',
        center: ['74%', '60%'], // 右边这个饼图
        data: [],
        label: {
          formatter: '{b}-{d}%',
          position: 'outside'
        }
      }
    ],
    backgroundColor: 'transparent'
  }

  const _7DaysOption = {
    title: [{
      text: '订单频次统计',
      left: 'center'
    }],
    tooltip: {
      trigger: 'axis',  // 触发方式，'axis' 表示通过坐标轴触发，'item' 表示通过具体图形元素触发
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        // 自定义提示框内容
        let content = `${params[0].name}<br/>`;  // params[0].name 是x轴上的类别
        params.forEach(function (item) {
          content += `维修订单数: ${item.value}<br/>`;
        });
        return content;
      }
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        interval: 0 // 强制显示所有标签
      }
    },
    yAxis: {
      type: 'value',
      minInterval: 1, // 强制最小间距为 1，避免小数出现
      axisLabel: {
        formatter: function (value) {
          return Number.isInteger(value) ? value : ''; // 只显示整数刻度
        }
      },
    },
    series: [
      {
        data: [],
        type: 'line',
        smooth: true
      }
    ],
    backgroundColor: 'transparent'
  }

  const buildOption = {
    title: [{
      text: '订单统计',
      left: 'center'
    }],
    tooltip: {
      trigger: 'axis',  // 触发方式，'axis' 表示通过坐标轴触发，'item' 表示通过具体图形元素触发
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        // 自定义提示框内容
        let content = `${params[0].name}<br/>`;  // params[0].name 是x轴上的类别
        params.forEach(function (item) {
          content += `维修订单数: ${item.value}<br/>`;
        });
        return content;
      }
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        interval: 0 // 强制显示所有标签
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [], // 示例数据，和建筑数一致
        type: 'bar'
      }
    ],
    backgroundColor: 'transparent',
  }

  // 设置初始图表
  orderEcharts.setOption(orderOption)
  _7DaysEcharts.setOption(_7DaysOption)
  buildEcharts.setOption(buildOption)

  // 请求后端数据
  orderStatistics().then(res => {
    orderOption.series[0].data = res.data.order
    orderOption.series[1].data = res.data.orderHistory

    _7DaysOption.xAxis.data = res.data.recent7DaysOrderCount.map(item => item.name)
    _7DaysOption.series[0].data = res.data.recent7DaysOrderCount.map(item => item.value)

    buildOption.xAxis.data = res.data.orderBuilding.map(item => item.name)
    buildOption.series[0].data = res.data.orderBuilding.map(item => item.value)

    buildEcharts.setOption(buildOption)
    _7DaysEcharts.setOption(_7DaysOption)
    orderEcharts.setOption(orderOption)
  })


  window.addEventListener('resize', () => {
    orderEcharts.resize()
    buildEcharts.resize()
  })
})
</script>

<style scoped lang="scss">
.app-container {
  padding-bottom: 0;
  padding-right: 0;
  //background-color: #fef8ef;
}

.el-aside {
  background: transparent;
  padding: 0;
}

.el-main {
  padding: 0;
  margin: 0;
}

.echarts-order {
  height: 260px;
  width: 99%;
}
.echarts-7day {
  height: 260px;
  width: 99%;
}
.echarts-build {
  height: 310px;
  width: 99%;
}
</style>

